<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" v-show="showSearch" class="ml10">
        <el-form :model="queryParams" ref="queryRef" :inline="true" @keyup.enter="handleQuery">
          <el-form-item label="状态" prop="status">
            <el-select style="width: 100%" v-model="queryParams.status" placeholder="请选择状态">
              <el-option :key="1" label="进行中" :value="1" />
              <el-option :key="2" label="已结束" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="发起时间" prop="taskTime">
            <el-date-picker type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" v-model="queryParams.taskTime"
              is-range range-separator="To" />
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="handleQuery">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right; margin-right: 20px"
            @queryTable="handleQuery"></right-toolbar>
        </div>
      </el-row>

      <el-table ref="dataTableRef" v-loading="loading" :data="dataList" highlight-current-row border
        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column label="分组" prop="groupName" width="100" />
        <el-table-column label="流程" prop="name" width="150" />
        <el-table-column label="发起时间" prop="createTime" width="200" />
        <el-table-column label="结束时间" prop="endTime" width="200" />
        <el-table-column label="状态" prop="taskCreateTime" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">进行中</el-tag>
            <el-tag v-else-if="scope.row.status == 2 && scope.row.subStatus == 2" type="error">已拒绝</el-tag>
            <el-tag v-else-if="scope.row.status == 2 && scope.row.subStatus == 3" type="error">已撤销</el-tag>
            <el-tag v-else>已结束</el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" link icon="View" @click="deal(scope.row)"> 查看 </el-button>
            <el-popconfirm title="确认终止吗?" @confirm="stop(scope.row)">
              <template #reference>
                <el-button :disabled="scope.row.status != 1" type="primary" size="small" link icon="VideoPause">
                  终止流程
                </el-button>
              </template>
            </el-popconfirm>
            <el-button v-if="scope.row.status != 1" type="primary" size="small" link icon="VideoPause"
              @click="anew(scope.row)">
              重新发起
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" :total="total" :current="queryParams.pageNum" :size="queryParams.pageSize"
        @sizeChange="sizeChange" @currentChange="currentChange" />
      <!--			右侧抽屉-->
      <el-drawer v-model="rightDrawerVisible" direction="rtl" size="400px">
        <template #header>
          <h3>{{ currentData?.name }}</h3>
        </template>
        <template #default>
          <el-card class="box-card">
            <form-render ref="formRenderRef" :form-list="currentOpenFlowForm"></form-render>
          </el-card>
          <flow-node-format :disableSelect="true" :formData="formValue" :selectUserNodeId="selectUserNodeId"
            :processInstanceId="currentData.processInstanceId" :flow-id="currentData.flowId"
            ref="flowNodeFormatRef"></flow-node-format>
          <div style="display: flex;justify-content: center;" v-if="isAnew">
            <el-button type="primary" @click="submitProcess"> 提交 </el-button>
          </div>
        </template>
      </el-drawer>
    </div>
  </div>
</template>
<script setup lang="ts">
import FormRender from '/@/views/flow/form/render/FormRender.vue';
import FlowNodeFormat from '/@/views/flow/form/tools/FlowNodeFormatData.vue';
import { queryMineStarted, stopProcessInstance, recreateProcessInstance } from '/@/api/flow/task';
import { detail } from '/@/api/flow/processInstance';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ElMessage } from 'element-plus';
import { getFlowDetail, startFlow } from '/@/api/flow/flow';
const state: BasicTableProps = reactive<BasicTableProps>({});
const { tableStyle } = useTable(state);
const rightDrawerVisible = ref(false);
const selectUserNodeId = ref<String[]>([]);
const loading = ref(false);
const showSearch = ref(true);
const isAnew = ref(false);
const total = ref(0);
const queryRef = ref();
const formRenderRef = ref();
const flowId = ref('');
const flowNodeFormatRef = ref();

function stop(row) {
  stopProcessInstance({
    processInstanceId: row.processInstanceId,
  }).then((res) => {
    handleQuery();
  });
}
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  taskTime: undefined,
  endTime: undefined,
  status: 2,
});

const dataList = ref();
// const formValue = ref();
const currentData = ref();
/**
 * 点击开始处理
 * @param row
 */
const deal = (row) => {
  currentData.value = row;
  detail({
    processInstanceId: row.processInstanceId,
  }).then((res) => {
    currentOpenFlowForm.value = res.data.formItems;
    rightDrawerVisible.value = true;
    console.log(currentOpenFlowForm.value)
    //     var obj = {};

    // for (var item of currentOpenFlowForm.value) {
    //   obj[item.id] = item.props.value;
    // }
    // formValue.value = obj
  });
};

const anew = (row) => {
  currentData.value = row;
  flowId.value = row.flowId;
  detail({
    processInstanceId: row.processInstanceId,
  }).then((res) => {
    getFlowDetail(row.flowId).then((res) => {


      selectUserNodeId.value = res.data.selectUserNodeId;

    });
    if (res.data.formItems && res.data.formItems.length > 0) {
      res.data.formItems.forEach((item) => {
        item.perm = "";
      });
      currentOpenFlowForm.value = res.data.formItems;
      rightDrawerVisible.value = true;
      isAnew.value = true;
      console.log(currentOpenFlowForm.value)
    }

  });
};
const currentOpenFlowForm = ref();


/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  queryMineStarted(queryParams)
    .then(({ data }) => {
      dataList.value = data.records;
      log
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  handleQuery();
};

onMounted(() => {
  handleQuery();
});

const formValue = computed(() => {
  var obj = {};

  for (var item of currentOpenFlowForm.value) {
    obj[item.id] = item.props.value;
  }
  console.log(obj)
  return obj;
});
const sizeChange = (e: any) => {
  queryParams.pageNum = 1;
  queryParams.pageSize = e;
  handleQuery();
}
const currentChange = (e: any) => {
  queryParams.pageNum = e;
  handleQuery();
}
const submitProcess = () => {
  let validate = flowNodeFormatRef.value.validate();
  if (!validate) {
    ElMessage.warning('请选择节点执行人');
    return;
  }

  let param = flowNodeFormatRef.value.formatSelectNodeUser();

  currentOpenFlowForm.value.forEach((res) => (param[res.id] = res.props.value));

  {
    for (var item of currentOpenFlowForm.value) {
      param[item.id] = item.props.value;
      if (item.type === 'Layout') {
        let subList = item.props.value;

        var d = [];
        for (var array of subList) {
          var v = {};

          for (var subItem of array) {
            let value = subItem.props.value;
            v[subItem.id] = value;
          }
          d.push(v);
        }
        param[item.id] = d;
      }
    }
  }
  console.log(param)
  var data = {
    flowId: flowId.value,
    paramMap: param,
  };
  formRenderRef.value.validate(function (valid) {
    if (valid) {
      startFlow(data).then((res) => {
        rightDrawerVisible.value = false;
        ElMessage.success('提交成功');
      });
    }
  });
};
</script>
